<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>分页插件demo</title>
    <link rel="stylesheet" href="style/pagination.css"/>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #list {
            width: 1000px;
            margin: 10px auto;
        }

        #list ul {
            list-style: none;
        }

        #list ul li {
            width: 240px;
            height: 190px;
            margin-left: 8px;
            margin-top: 25px;
            margin-bottom: 5px;
            position: relative;
            float: left;
        }

        #list ul li div.img {
            padding: 4px;
            border-radius: 10px;
            box-shadow: 0 0 5px #cdcdcd;
            border: 1px solid #cdcdcd;
            margin-top: 10px;
        }

        #list ul li div img {
            width: 230px;
            height: 180px;
        }

        #list ul li div.detail {
            margin: 5px;
            color: #559999;
            float: left;
            width: 240px;
        }

        #list ul li span.price {
            float: right;
            color: #cc0033;;
            margin-right: 8px;
        }

        #setPageDiv {
            clear: left;
            width: 1000px;
            margin: 10px auto;
        }

        .shopping {
            position: fixed;
            height: 50px;
            width: 200px;
            right: 0px;
            top: 15px;
        }

        .shopping-buy-btn {
            border: 1px dotted #cdcdcd;
            background-color: #cdcdcd;
            color: #cc0033;
            font-size: small;
            border-radius: 3px;
            box-shadow: 0 0 5px #cdcdcd;

        }

        .shopping span.showNum {
            position: absolute;
            left: 8px;
            top: -8px;
            background-color: #f69;
            color: #FFFFFF;
            font-size: large;
            width: 20px;
            height: 15px;
            border-radius: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="setPageDiv">
        <select id="setPage">
            <option value="4">四条数据</option>
            <option value="8">八条数据</option>
            <option value="12">十二条数据</option>
        </select>

        <div id="Pagination" class="pagination"></div>
    </div>

    <div id="list">
        <ul></ul>
    </div>
</body>
<script src="../jquery.js"></script>
<script src="./js/jquery.pagination.js"></script>
<script>
    class Page{
        constructor(ops){
            // 处理默认参数
            this.pageBox = ops.pageBox
            this.listBox = ops.listBox
            this.url = ops.url
            this.num = ops.num || 4;
            this.index = ops.index || 0;

            // 获取数据
            this.load()
        }
        load(){
            $.ajax({
                url:this.url,
                success:(res)=>{
                    // 请求成功，解析数据
                    this.res = JSON.parse(res)
                    // 渲染页码
                    this.renderPage()
                },
                dataType:"text"
            })
        }
        renderPage(){
            // console.log(this.res)
            // 使用分页插件渲染页码
            this.pageBox.pagination(this.res.length, {
                items_per_page:this.num,
                current_page:this.index,
                callback:index => {
                    // console.log("渲染页面")
                    // console.log(this.res)
                    this.index = index
                    this.render()
                }
            })
        }
        render(){
            // 计算分页要显示的数据的范围
            // console.log(this.res)
            // 0~4      num4*index0  ~  num4*index0+num4
            // 4~8      num4*index1  ~  num4*index1+num4
            // 8~12     num4*index2  ~  num4*index2+num4
            // 12~16
            var str = "";
            for(var i=this.num*this.index; i<this.num*this.index+this.num; i++){
                // 判断遍历出的索引是否在可用长度内
                if(i<this.res.length){
                    str += '<li>'+
                            '<div class="img">'+
                                    '<img src="'+this.res[i].img+'">'+
                            '</div>'+
                            '<div class="detail">'+this.res[i].info+'<span class="price">特价'+this.res[i].price+'$</span>'+
                            '</div>'+
                        '</li>'
                }
            }
            // 将字符填充到页面
            this.listBox.html(str);
        }
    }

    // 执行
    new Page({
        pageBox:$(".pagination"),
        listBox:$("#list").children("ul"),
        url:"./data/list.json",
        num:4,
        index:0
    })

</script>
</html>
